<template>
    <div class="container">
        <!-- 新增房间弹窗 -->
        <el-form :model="form" label-width="auto">
            <el-form-item label="房间类型">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="竖排布局">
                <el-input v-model="form.layout"></el-input>
            </el-form-item>
            <el-form-item label="房间比列">
                <el-input v-model="form.highProportion"></el-input>
            </el-form-item>
            <el-form-item label="房间号" v-if="form.type == 1">
                <el-input v-model="form.roomNumber"></el-input>
            </el-form-item>
            <el-form-item label="是否需要vip">
                <el-select v-model="form.reserveVip" placeholder="请选择">
                    <el-option label="不需要" value="0"></el-option>
                    <el-option label="需要" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="背景图">
                <el-upload
                    :headers="myHeaders"
                    :action="uploadsrc"
                    accept="image/jpeg,image/gif,image/png"
                    list-type="picture-card"
                    :limit="1"
                    :class="img.length > 0 ? 'hide' : ''"
                    :before-upload="handleBeforeUpload"
                    :on-success="uploadLogoSuccess"
                    :on-remove="handleRemove"
                    :on-error="uploadError"
                    :file-list="img"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
const geturlkey = require('../../../utils/geturlkey');
export default {
    data() {
        return {
            form: {},
            img: [],
            option: [
                { label: '房间', value: '1' },
                { label: '大厅', value: '2' },
                { label: '走廊', value: '3' }
            ],
            myHeaders:{}
        };
    },
    created() {
        this.uploadsrc = uploadsrc;
        this.form.floorId = geturlkey.getUrlKey('floorId')
        this.form.teahouseId = geturlkey.getUrlKey('teahouseId')
    },
    methods: {
        handleBeforeUpload(file) {
            this.getmyHeaders();
        },
        getmyHeaders() {
            var dHeader = dynamicHeader();
            this.myHeaders.signature = dHeader.signature;
            this.myHeaders.nonce = dHeader.nonce;
            this.myHeaders.timestamp = dHeader.timestamp;
            this.myHeaders.appkey = dHeader.appkey;
            this.myHeaders.token = dHeader.token;
        },
        uploadLogoSuccess(data) {
            if (data.returnCode == 200) {
                this.form.backgroundImage = data.data;
                let imgUrl = {
                    url:data.data
                }
                this.img.push(imgUrl)
            } else {
                this.$message.error(`上传失败，请重新上传`);
            }
        },
        handleRemove(file, fileList) {
            this.form.backgroundImage = [];
            this.img = [];
        },
        uploadError() {
            this.$message.error(`上传失败，请重新上传`);
        },
        submit(){
            addHouse(this.form).then(res=>{
                if(res.returnCode==200){
                    this.$message.success('添加成功')
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                }
            },err=>{
                this.$message.error('添加失败:'+res.returnMsg)
            })
        },
        cancel() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        },
    }
};
</script>
<style >
    .hide .el-upload--picture-card {
    display: none;
}
</style>